<template>
	<view>
		<!-- 搜索框 -->
		<view class="center black93-bj a-center j-sp border-r-15 mar-top20">
			<view class="search-input a-center mar-left25 line-h70">
				<view  class="icon-search black20-zt mar-right15"></view>
				<input type="text" v-model="search" placeholder="热门搜索" class="font-26 black20-zt" placeholder-style="color:#bbbbbb;font-size:13px"/>
			</view>
			<view class="mar-right25 black20-zt font-26 pad-l-30 line-h70" @tap="btnOk">搜索</view>
		</view>
		<!-- 搜索框 -->
		<view class="center mar-top40" v-if="list.length>0">
			<view class="font-28 black20-zt font-w-b">历史搜索</view>
			<view class="a-center mar-top30 flex-wrap">
				<view class="font-24 pad-l-20 pad-r-20 line-h40 hot-bj border-r-10 mar-right20 mar-bottom20" v-for="(item,index) in list" :key="index" @tap="searchClick(item.name)">
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- 参与热门 -->
		<view class="center mar-top40">
			<view class="font-28 black20-zt font-w-b">热门搜索</view>
			<template v-for="(item,index) in hot">
				<view class="a-center j-sp mar-top40 mar-bottom20" v-if="index==0" @tap="click(item.id,item.name)">
					<view class="a-center">
						<view class="one j-center flex-column mar-right20">
							<view class="icon-huangguan text-center"></view>
							<view class="font-22 text-center">{{index+1}}</view>
						</view>
						<view class="font-26 black20-zt">{{item.name}}</view>
					</view>
					<view class="font-22 black60-zt">{{processing(item.sum)}}次搜索</view>
				</view>
				<view class="a-center j-sp mar-top40 mar-bottom20" v-else-if="index==1" @tap="click(item.id,item.name)">
					<view class="a-center">
						<view class="two j-center flex-column mar-right20">
							<view class="icon-huangguan text-center"></view>
							<view class="font-22 text-center">{{index+1}}</view>
						</view>
						<view class="font-26 black20-zt">{{item.name}}</view>
					</view>
					<view class="font-22 black60-zt">{{processing(item.sum)}}次搜索</view>
				</view>
				<view class="a-center j-sp mar-top40 mar-bottom20" v-else-if="index==2" @tap="click(item.id,item.name)">
					<view class="a-center">
						<view class="three j-center flex-column mar-right20">
							<view class="icon-huangguan text-center"></view>
							<view class="font-22 text-center">{{index+1}}</view>
						</view>
						<view class="font-26 black20-zt">{{item.name}}</view>
					</view>
					<view class="font-22 black60-zt">{{processing(item.sum)}}次搜索</view>
				</view>
				<view class="a-center j-sp mar-top40 mar-bottom20" v-else @tap="click(item.id,item.name)">
					<view class="a-center">
						<view class="j-center flex-column mar-right20">
							<view class="font-22 text-center black60-zt">{{index+1}}</view>
						</view>
						<view class="font-26 black20-zt">{{item.name}}</view>
					</view>
					<view class="font-22 black60-zt">{{processing(item.sum)}}次搜索</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_id:0,
				token:'',
				search:"",
				list:[],
				hot:[]
			}
		},
		onLoad() {
			//初始化数据
			this.token=this.$user.state.token
			this.user_id=this.$user.state.userId
			this.Search()
			this.hotSearch()
			//开启分享
			wx.showShareMenu({
				withShareTicket:true,
				menus:["shareAppMessage","shareTimeline"]
			})
		},
		//设置分享好友的内容
		onShareAppMessage(res) {
			if (res.from=="button"){
				console.log(res.target)
			}
			return {
				title:"鑫意到家",
				path: '/pages/index/index?rid=',
				desc:"鑫意到家 · 洁新留下！",
				imageUrl:"../../static/202310131154405365.png"
			}
		},
		//分享朋友圈
		onShareTimeline(res) {
			return {
				title: '鑫意到家 · 洁新留下！',
				type: 0,
				summary: "鑫意到家 · 洁新留下！",
			}
		},
		methods: {
			//请求搜索
			async btnOk(){
				let one={
					name:this.search,
					mid:undefined,
					aid:1
				}
				if(this.user_id>0){
					one.mid=this.user_id
					await this.$api.AddSearch(one).then(res=>{
						if(res.code==0){
							console.log(res.data)
						}
					})
				}
				uni.navigateTo({
					url:'/pagesC/searchshow/searchshow?search='+this.search
				})
			},
			//搜索历史
			async searchClick(name){
				this.search=name
				uni.navigateTo({
					url:'/pagesC/searchshow/searchshow?search='+this.search
				})
			},
			//获取历史搜索
			async Search(){
				if(this.user_id<=0){return}
				const one={
					aid:1,
					limit:10,
					mid:this.user_id
				}
				await this.$api.GetSearch(one).then(res=>{
					if(res.code==0){
						this.list=res.data
					}
				})
			},
			//搜索热门
			async click(id,name){
				let two={
					name:name,
					mid:undefined,
					aid:1
				}
				if(this.user_id>0){
					two.mid=this.user_id
					await this.$api.AddSearch(two).then(res=>{
						if(res.code==0){
							console.log(res.data)
						}
					})
				}
				const one={
					id:id
				}
				this.search=name
				await this.$api.AddHotSearch(one).then(res=>{
					uni.navigateTo({
						url:'/pagesC/searchshow/searchshow?search='+this.search
					})
				})
			},
			//获取热门搜索
			async hotSearch(){
				const one={
					aid:1,
					limit:10
				}
				await this.$api.GetHotSearch(one).then(res=>{
					if(res.code==0){
						this.hot=res.data
					}
				})
			},
			//数字处理
			processing(e){
				if(e>10000){
					const sum=parseInt(e/10000)
					return sum+'万+'
				}else {
					return e
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-input{
		input{
			width: 500rpx;
		}
	}
	.hot-bj{
		background-color: #fbf0ee;
		text{
			color: #eb697a;
		}
	}
	.search-bj{
		background-color: #ebebeb;
		text{
			color: #7f7f7f;
		}
	}
	.one view:first-child{
		color: #fbde8f;
		font-size: 18rpx;
		margin-top: -10rpx;
	}
	.one view:last-child,.two view:last-child,.three view:last-child{
		color: #ec6a58;
		margin-top: -5rpx;
	}
	.two view:first-child{
		color: #d5d5d5;
		font-size: 18rpx;
		margin-top: -10rpx;
	}
	.three view:first-child{
		color: #e5ddbd;
		font-size: 18rpx;
		margin-top: -10rpx;
	}
</style>
